import { useState, useRef } from "react";

const Chapter3 = (props) => {
    const { title } = props;
    const [count, setCount] = useState(0);
    const numInputRef = useRef(null);
    const increment = () => {
        if (!/^\d+$/.test(numInputRef.current.value)) {
            return;
        }
        setCount((count) => count + numInputRef.current.value * 1);
    };
    return (
        <div className='wrapper wrapper3'>
            <div className='page-header'>
                <h3>{title}</h3>
            </div>
            <div className='page-content'>
                <div className='alert alert-danger'>当前值为：{count}</div>
                <div className='form-group'>
                    <input
                        type='text'
                        ref={numInputRef}
                        className='form-control'
                        placeholder='请输入要增加的值'
                    />
                </div>
                <div className='btn btn-danger' onClick={increment}>
                    增加
                </div>
            </div>
        </div>
    );
};

export default Chapter3;
